<template>
	<view id="apps">
		
		
		<!-- header -->
		<view class="header">
			
			<view class="lct">
				<image src="/static/images/icon_lct@2x.png" mode="widthFix"></image>
				<text>深圳</text>
			</view>
			
			<view class="so">
				<image src="/static/images/icon_so@2x.png" mode="widthFix"></image>
				<input type="text" placeholder="请输入关键词" placeholder-class="placeholder">
			</view>
			
			<view class="sao">
				<image src="/static/images/icon_sao@2x.png" mode="widthFix"></image>
				<image src="/static/images/icon_chat@2x.png" mode="widthFix"></image>
			</view>
			
		</view>
		
		
		
		
		
		<!-- swiper 幻灯-->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper">
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/images/bns.png" mode="widthFix"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/images/bns.png" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		
		
		
		
		
		<!-- icon_list  图标-->
		<view class="icon_list">
			<view class="item">
				<image src="/static/images/icon_cyms@2x.png" mode="widthFix"></image>
				<text>餐饮美食</text>
			</view>
			<view class="item">
				<image src="/static/images/icon_mrmf@2x.png" mode="widthFix"></image>
				<text>美容美发</text>
			</view>
			<view class="item">
				<image src="/static/images/iocn_cspl@2x.png" mode="widthFix"></image>
				<text>超市便利</text>
			</view>
			<view class="item">
				<image src="/static/images/icon_xxyl@2x.png" mode="widthFix"></image>
				<text>休闲娱乐</text>
			</view>
			<view class="item">
				<image src="/static/images/icon_jdzs@2x.png" mode="widthFix"></image>
				<text>酒店住宿</text>
			</view>
			<view class="item">
				<image src="/static/images/icon_ydjs@2x.png" mode="widthFix"></image>
				<text>运动健身</text>
			</view>
			<view class="item">
				<image src="/static/images/icon_yyjk@2x.png" mode="widthFix"></image>
				<text>医药健康</text>
			</view>
			<view class="item">
				<image src="/static/images/icon_jypx@2x.png" mode="widthFix"></image>
				<text>教育培训</text>
			</view>
			<view class="item">
				<image src="/static/images/icon_qcfw@2x.png" mode="widthFix"></image>
				<text>汽车服务</text>
			</view>
			<view class="item">
				<image src="/static/images/icon_jzwy@2x.png" mode="widthFix"></image>
				<text>家装物业</text>
			</view>
		</view>
				
				
				
				
		<!-- 品牌推荐 -->
		<view class="logo_hot">
			
			<view class="title">
				<text class="t">品牌推荐</text>
				<view class="more">
					<text>更多</text>
					<image src="../../static/images/ck_ion01@2x.png" mode="widthFix"></image>
				</view>
			</view>
				
		</view>		
				
				
				
				
		<!-- scroll-view -->
		<scroll-view  class="scrollview" scroll-x="true" scroll-left="144" show-scrollbar="false">
			
				<view class="item">
					<image src="/static/images/face.png"></image>
				</view>
				<view class="item">
					<image src="/static/images/face.png"></image>
				</view>
				<view class="item">
					<image src="/static/images/face.png"></image>
				</view>
				<view class="item">
					<image src="/static/images/face.png"></image>
				</view>
				<view class="item">
					<image src="/static/images/face.png"></image>
				</view>
				<view class="item">
					<image src="/static/images/face.png"></image>
				</view>
				<view class="item">
					<image src="/static/images/face.png"></image>
				</view>
				<view class="item">
					<image src="/static/images/face.png"></image>
				</view>
				<view class="item">
					<image src="/static/images/face.png"></image>
				</view>
				<view class="item">
					<image src="/static/images/face.png"></image>
				</view>
			
		</scroll-view>
				
				
				
				
		<!-- tab -->
		<view class="tab">
			<text class="active">附近商家</text>
			<text>精选餐饮</text>
		</view>
				
		<view class="select">
			<picker class="picker">
				<view>
					<text>全部美食</text>
					<image src="/static/images/icon_arr.png" mode="widthFix"></image>
				</view>
			</picker>
			<picker class="picker">
				<view>
					<text>附近</text>
					<image src="/static/images/icon_arr.png" mode="widthFix"></image>
				</view>
			</picker>
			<picker class="picker">
				<view>
					<text>智能排序</text>
					<image src="/static/images/icon_arr.png" mode="widthFix"></image>
				</view>
			</picker>
			<picker class="picker">
				<view>
					<text>筛选</text>
					<image src="/static/images/icon_arr.png" mode="widthFix"></image>
				</view>
			</picker>
		</view>		
				
				
		
		
		<!-- list -->
		<view class="pro_list">
			
			
			<!-- item -->
			<view class="item">
				<div class="img">
					<image src="/static/images/face.png"></image>
				</div>
				<view class="text">
					<text class="t">哆来咪呀定制晚宴西餐厅</text>
					<view class="star_box">
						<view class="star">
							<image src="/static/images/star.png" mode="widthFix"></image>
							<image src="/static/images/star.png" mode="widthFix"></image>
							<image src="/static/images/star.png" mode="widthFix"></image>
							<image src="/static/images/star.png" mode="widthFix"></image>
							<image src="/static/images/star2.png" mode="widthFix"></image>
						</view>
						<text class="fs">4.7</text>
						<view class="price">
							<text>￥44</text>
							<text> / 人</text>
						</view>
					</view>
					<view class="label">
						<text>茶餐厅</text>
						<text>沙井</text>
					</view>
					<view class="footer">
						<view class="label_s">
							<text>五星大厨</text>
							<text>西式烘培</text>
						</view>
						<view class="mm">
							<image src="../../static/images/icon_loct.png" mode="widthFix"></image>
							<text>339m</text>
						</view>
					</view>
				</view>
			</view>
			
			
			
			<!-- item -->
			<view class="item">
				<div class="img">
					<image src="/static/images/face.png"></image>
				</div>
				<view class="text">
					<text class="t">哆来咪呀定制晚宴西餐厅</text>
					<view class="star_box">
						<view class="star">
							<image src="/static/images/star.png" mode="widthFix"></image>
							<image src="/static/images/star.png" mode="widthFix"></image>
							<image src="/static/images/star.png" mode="widthFix"></image>
							<image src="/static/images/star.png" mode="widthFix"></image>
							<image src="/static/images/star2.png" mode="widthFix"></image>
						</view>
						<text class="fs">4.7</text>
						<view class="price">
							<text>￥44</text>
							<text> / 人</text>
						</view>
					</view>
					<view class="label">
						<text>茶餐厅</text>
						<text>沙井</text>
					</view>
					<view class="footer">
						<view class="label_s">
							<text>五星大厨</text>
							<text>西式烘培</text>
						</view>
						<view class="mm">
							<image src="../../static/images/icon_loct.png" mode="widthFix"></image>
							<text>339m</text>
						</view>
					</view>
				</view>
			</view>
			
			
			
			<!-- item -->
			<view class="item">
				<div class="img">
					<image src="/static/images/face.png"></image>
				</div>
				<view class="text">
					<text class="t">哆来咪呀定制晚宴西餐厅</text>
					<view class="star_box">
						<view class="star">
							<image src="/static/images/star.png" mode="widthFix"></image>
							<image src="/static/images/star.png" mode="widthFix"></image>
							<image src="/static/images/star.png" mode="widthFix"></image>
							<image src="/static/images/star.png" mode="widthFix"></image>
							<image src="/static/images/star2.png" mode="widthFix"></image>
						</view>
						<text class="fs">4.7</text>
						<view class="price">
							<text>￥44</text>
							<text> / 人</text>
						</view>
					</view>
					<view class="label">
						<text>茶餐厅</text>
						<text>沙井</text>
					</view>
					<view class="footer">
						<view class="label_s">
							<text>五星大厨</text>
							<text>西式烘培</text>
						</view>
						<view class="mm">
							<image src="../../static/images/icon_loct.png" mode="widthFix"></image>
							<text>339m</text>
						</view>
					</view>
				</view>
			</view>
			
			
		</view>
		
				
				
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">

	page{
		background: #EFEFF4;
	}
	
	#apps{

		display: flex;
		flex-direction: column;
		overflow-x: hidden;
		
		
		.header{
			position: fixed;
			background: #fff;
			height: 88rpx;
			line-height: 88rpx;
			z-index: 100;
			left: 0;
			right: 0;
			top: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;
			box-sizing: border-box;
			
			.lct{
				display: flex;
				align-items: center;
				image{
					width: 44rpx;
					height: auto;
				}
				text{
					font-size: 34rpx;
					color: #333;
					font-weight: bold;
					margin-left: 10rpx;
				}
			}
			
			.so{
				flex: 1;
				margin: 0 20rpx;
				box-sizing: border-box;
				position: relative;
				image{
					width: 36rpx;
					height: auto;
					position: absolute;
					top: 0;
					left: 26rpx;
					bottom: 0;
					margin: auto;
				}
				input{
					background: rgba(219, 219, 219, 0.37);
					border-radius: 100px;
					height: 62rpx;
					padding: 0 32rpx 0 70rpx;
				}
				.placeholder{
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.sao{
				display: flex;
				align-items: center;
				image{
					width: 44rpx;
					height: auto;
					margin-left: 20rpx;
				}
			}
			
		}
		
		
		.swiper{
			display: block;
			padding: 24rpx;
			box-sizing: border-box;
			margin-top: 88rpx;
			image{
				width: 100%;
				height: auto;
			}
		}
		
		
		.icon_list{
			display: grid;
			grid-template-columns: repeat(4,1fr);
			gap: 20rpx;
			.item{
				image{
					width: 124rpx;
					height: auto;
					display: block;
					text-align: center;
					margin: auto;
				}
				text{
					font-size: 24rpx;
					color: #333;
					display: block;
					text-align: center;
				}
			}
		}
		
		
		
		
		// 品牌推荐
		.logo_hot{
			margin: 20rpx 0;
			display: block;
			padding: 24rpx 24rpx 0 24rpx;
			box-sizing: border-box;
			.title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.t{
					font-size: 34rpx;
					color: #333;
					font-weight: bold;
				}
				.more{
					font-size: 24rpx;
					color: #999;
					image{
						width: 12rpx;
						height: auto;
					}
				}
			}
		}
		
		
		
		// scroll-view
		.scrollview{
			margin: 10rpx 0 0 24rpx;
			white-space: nowrap;
			overflow-x: auto;
			::-webkit-scrollbar{width:0px; height:0px;}
			.item{
				background: #fff;
				width: 144rpx;
				height: 144rpx;
				display: inline-block;
				border-radius: 10rpx;
				margin-right: 20rpx;
				&:last-of-type{
					margin-right: 48rpx;
				}
			}
			image{
				width: 144rpx;
				height: 144rpx;
				border-radius: 10rpx;
			}
		}
		
		
		
		// tab
		.tab{
			display: flex;
			align-items: center;
			padding: 24rpx;
			box-sizing: border-box;
			text{
				font-size: 28rpx;
				color: #666;
				font-weight: bold;
				margin-right: 40rpx;
				z-index: 20;
				&.active{
					color: #333;
					font-size: 34rpx;
					position: relative;
					&::after{
						content: '';
						background: linear-gradient(90deg, #DE4335 0%, #F88365 100%);
						width: 100%;
						height: 12rpx;
						display: inline-block;
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0rpx;
						margin: auto;
						z-index: -1;
					}
				}
			}
		}
		
		
		
		
		// select
		.select{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10rpx 24rpx;
			
			.picker{
				display: flex;
				align-items: center;
				image{
					width: 20rpx;
					height: auto;
					display: inline-block;
					margin-left: 10rpx;
				}
				view{
					font-size: 22rpx;
					color: #999;
				}
			}
			
		}
		
		
		
		
		// pro_list
		.pro_list{
			padding: 24rpx;
			box-sizing: border-box;

			.item{
				background: #fff;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 20rpx 20rpx 40rpx 20rpx;
				box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
				
				.img{
					width: 146rpx;
					height: auto;
					image{
						width: 146rpx;
						height: 146rpx;
						border-radius: 18rpx;
					}
				}
				
				.text{
					margin-left: 20rpx;
					flex: 1;
					.t{
						font-weight: bold;
						font-size: 28rpx;
					}
				}
				
				.star_box{
					margin: 8rpx 0;
					display: flex;
					align-items: center;
					.star{
						display: flex;
						align-items: center;
						image{
							width: 26rpx;
							height: auto;
						}
					}
					.fs{
						font-size: 22rpx;
						color: $index_color;
						font-weight: bold;
						margin: 0 10rpx;
						box-sizing: border-box;
					}
					.price{
						font-size: 22rpx;
						color: #666;
					}
				}
				
				.label{
					display: flex;
					align-items: center;
					font-size: 22rpx;
					color: #666;
					margin: 10rpx 0 16rpx 0;
					text{
						margin-right: 10rpx;
					}
				}
				
				
				.footer{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.label_s{
						display: flex;
						align-items: center;
						flex: 1;
						text{
							border: 1px #DE4335 solid;
							border-radius: 6rpx;
							padding: 3rpx 10rpx 4rpx 10rpx;
							box-sizing: border-box;
							font-size: 20rpx;
							color: $index_color;
							margin-right: 10rpx;
						}
					}
					.mm{
						display: flex;
						align-items: center;
						image{
							width: 20rpx;
							height: auto;
						}
						text{
							font-size: 22rpx;
							color: #999;
							margin-left: 10rpx;
						}
					}
				}
				
			}
		}
		
		
		
	}
	

</style>
